<template>
  <div class="shipin">
    <van-nav-bar title="MV" left-arrow @click-left="$router.go(-1)" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-row>
        <van-col
          span="12"
          v-for="(item, index) in list"
          :key="index"
          class="col"
        >
          <p class="info">{{ item.name }}</p>
          <img
            :src="item.cover"
            alt=""
            class="img-item"
            @click="$router.push({ path: '/mvfind', query: { id: item.id } })"
          />
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>

<script>
import { getShipin } from './shipin'
export default {
  name: 'shipin',
  data () {
    return {
      offset: 0,
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    async onLoad () {
      let res = await getShipin({ offset: this.offset })
      console.log(res)
      this.list.push(...res.data.data)
      this.offset++
      for (let i = 0; i < res.data.data.length; i++) {
        await getShipin({ offset: this.offset })
        this.offset++
        this.loading = false
      }
      this.loading = false
      if (res.data.data.length == 0) {
        this.finished = true
      }
    }
  }
}
</script>

<style scoped>
.col {
  margin-right: 10px;
  width: 100%;
}
.img-item {
  height: 200px;
  width: 100%;
}
.info {
  margin: 0;
  font-size: 16px;
  text-align: center;
  margin: 5px 0;
}
</style>
